<template>
  <div class="maps" ref="mapRef">我是map</div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import chinaJson from './china.json'

// 注册中国地图
echarts.registerMap('china', chinaJson as any)
onMounted(() => {
  let myChart = echarts.init(mapRef.value)
  myChart.setOption({
    geo: {
      map: 'china',
      roam: true,
      label: {
        show: true,
        color: 'white',
        fontSize: 12,
      },
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#1488CC', // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#1c6dc4', // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
        opacity: 0.8,
      },
      emphasis: {
        itemStyle: {
          color: 'pink',
        },
        label: {
          fontSize: 14,
        },
      },
    },
    grid: {
      left: 0,
      right: 0,
      bottom: 0,
      top: 0,
    },
    series: [
      {
        type: 'lines',
        data: [
          {
            coords: [
              [116.405285, 39.904989],
              [121.473701, 31.230416],
            ],
            lineStyle: {
              color: 'white',
              width: 1,
            },
          },
          {
            coords: [
              [87.617733, 43.792818],
              [113.280637, 23.125178],
            ],
            lineStyle: {
              color: 'white',
              width: 1,
            },
          },
          {
            coords: [
              [102.712251, 25.040609],
              [112.549248, 37.857014],
            ],
            lineStyle: {
              color: 'white',
              width: 1,
            },
          },
          {
            coords: [
              [112.549248, 37.857014],
              [102.712251, 25.040609],
            ],
            lineStyle: {
              color: 'white',
              width: 1,
            },
          },
          {
            coords: [
              [113.280637, 23.125178],
              [87.617733, 43.792818],
            ],
            lineStyle: {
              color: 'white',
              width: 1,
            },
          },
          {
            coords: [
              [108.320004, 22.82402],
              [126.642464, 45.756967],
            ],
            lineStyle: {
              color: 'white',
              width: 1,
            },
          },
        ],
        // 开启动画特效
        effect: {
          show: true,
          symbol:
            'path://M599.06048 831.309824l12.106752-193.404928 372.860928 184.430592L984.02816 710.206464 617.906176 367.33952 617.906176 151.638016c0-56.974336-46.188544-143.064064-103.158784-143.064064-56.974336 0-103.158784 86.089728-103.158784 143.064064L411.588608 367.33952 45.461504 710.206464l0 112.129024 366.660608-184.430592 14.999552 209.27488c0 5.05344 0.594944 9.892864 1.124352 14.749696l-66.591744 60.348416 0 66.587648 153.986048-50.879488 2.43712-0.80896 147.439616 51.688448 0-66.587648-68.758528-62.253056L599.06048 831.309824z',
          period: 10,
          trailLength: 0,
          color: '#fff',
          symbolSize: 12,
        },
        lineStyle: {
          normal: {
            color: 'yellow',
            width: 2,
            opacity: 0.6,
            curveness: 0.2, // 弧度值，范围 0-1，值越大弧度越明显
          },
        },
      },
    ],
  })
})

let mapRef = ref()
</script>

<style lang="scss" scoped></style>
